<template>
	<div>
	<ul>
		<li>
			<ynet-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</ynet-button>
			<ynet-number-keyboard
				type="simple"
				:has-mask="true"
				v-model="isKeyBoardShow"
				@enter="onNumberEnter"
				@delete="onNumberDelete"
				@hide="onNumberHide"
			></ynet-number-keyboard>
		</li>
	</ul>
		<div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
	</div>
</template>
<script>
	import { NumberKeyboard, Button } from 'ynet-mobile'
	export default {
		title: '简单类型(无确认和小数点，一般用于密码验证码输入)',
		name: 'number-keyboard-demo',
		components: {
			[NumberKeyboard.name]: NumberKeyboard,
			[Button.name]: Button
		},
		data(){
			return {
				isKeyBoardShow: false,
				number: ''
			}
		},
		methods: {
			onNumberEnter(val){
				this.number += val
			},
			onNumberDelete(){
				if(this.number === ''){
					return
				}
				this.number = this.number.substr(0, this.number.length - 1)
			},
			onNumberHide(){
				this.number = ''
			}
		}
	}
</script>
<style lang="scss">
.md-example-display{
	position: fixed;
	top: 30%;
	left: 50%;
	z-index: 9999;
	transform: translate(-50%, -50%);
	font-size: 120px;
	text-shadow: 0 4px 20px #666
}
</style>